<template>
  <button :class="type+' button'" v-html="content[type]" @click="clk"></button>
</template>

<script>
export default {
  props: ["type","amount"],
  data() {
    return {
    };
  },
  computed:{
    content(){
      return{
        start: "<p>"+this.$t("index.pour")+"</p>",//下注
        next: "<p>"+this.$t("index.nextpour")+"</p>",//下注（下一局）
        wating: "<p>"+this.$t("index.wating")+"</p><span>"+this.$t("index.cancel")+"</span>",//等待中（取消）
        fight: "<p>"+this.amount+"WSC</p><span>"+this.$t("index.fight")+"</span>",//逃跑
        watingNotCancel: "<p>"+this.$t("index.wating")+"</p>",//等待中
      }
    }
  },
  methods:{
      clk(){
          switch(this.type){
              case 'start':
                this.$emit('start')
                break;
              case 'next':
                this.$emit('next')
                break;
              case 'wating':
                this.$emit('wating')
                break;
              case 'fight':
                this.$emit('fight')
                break;
          }
      }
  }
};
</script>

<style lang="scss">
.button {
  height: 0.44rem;
  width: 2.4rem;
  border-radius: 0.03rem;
  background: linear-gradient(to right, #ffdc3b 0%, #ffc433 100%);
  display: block;
  margin: 0 auto;
  color: #fff;
  font-size: 0.15rem;
  line-height: 1.3;
  overflow: hidden;
  span {
    font-size: 0.12rem;
  }
  p {
    font-size: 0.15rem;
  }
}
.button.start,
.button.next {
  background: linear-gradient(to right, #ffdc3b 0%, #ffc433 100%);
}
.button.watingNotCancel{
  background: linear-gradient(to right, #928A36 0%, #997931 100%);
  color: #B9B9B9;
}
.button.wating {
  background: linear-gradient(to right, #60c5ff 0%, #97ffe3 100%);
  >p{
    animation: downAnimation .2s linear;
  }
  >span{
    display: block;
    animation: upAnimation .2s linear;
  }
}
.button.fight {
  background: linear-gradient(to right, #ff7044 0%, #ff4633 100%);
}
@keyframes downAnimation {
  0%{
    transform: translate(0,-100%);
  }
  100%{
    transform: translate(0,0);
  }
}
@keyframes upAnimation {
  0%{
    transform: translate(0,100%);
  }
  100%{
    transform: translate(0,0);
  }
}
</style>